<template>
<div>
  <el-table
    :data="roomList"
    style="width: 100%">
    <el-table-column
      prop="roomUuid"
      label="房间ID"
      width="300">
    </el-table-column>
    <el-table-column
      prop="roomName"
      label="房间名字"
      width="150">
    </el-table-column>
    <el-table-column
      prop="userId"
      label="教师ID"
      width="100">
    </el-table-column>
    <el-table-column
      prop="liveId"
      label="直播课程ID"
      width="100">
    </el-table-column>
    <el-table-column
      prop="beginTime"
      label="开始时间">
    </el-table-column>
    <el-table-column
      label="停止直播"
      width="180">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleStop( scope.row)">停止
        </el-button>
      </template>
    </el-table-column>

  </el-table>
  <el-dialog
    title="提示"
    :visible.sync="stopDialog"
    width="30%"
    :show-close="false"
    custom-class="dialog"
    center>
    <span style="position:relative;left:35%;font-size: 20px">确认关闭?</span>
    <span slot="footer" class="dialog-footer">
             <el-button type="primary" @click="realStop(opRow)">确 定</el-button>
            <el-button @click="cancelOp()">取 消</el-button>
          </span>
  </el-dialog>
</div>
</template>

<script>
import {APPID} from '@/utils/constant.js'
export default {
  name: 'room',
  created () {
    this.init()
  },
  data(){
    return{
      opRow:{},
      stopDialog:false,
      roomList:[],
    }

  },
  methods:{
    cancelOp(){
      this.opRow={}
      this.stopDialog=false
    },
    async realStop(opRow){
      // console.log(opRow)
      this.stopLive(opRow, null, null).then(res => {

        if (res.status ===0 ) {
           this.stopRoom(
             opRow.liveId
          ).then(result => {
          let res=result.data
            if (res.code === 0) {
              this.$message.success('关闭成功 !')
              this.$router.go(0)
            } else this.$message.error('关闭失败 !')
          })
        } else {
          this.$message.error('关闭失败 !')
        }
      }).catch(error => {
        if(error.response.status===409){
          this.stopRoom(
            opRow.liveId
          ).then(result => {
            let res=result.data
            if (res.code === 0) {
              this.$message.success('关闭成功 !')
              this.$router.go(0)
            } else this.$message.error('关闭失败 !')
          })

        }

      })
      this.stopDialog=false
    },
    handleStop(row){
      this.stopDialog=true;
      this.opRow=row;

    },
    async init(){
      await this.liveRoom().then(result => {
          let {data}=result;
          if(data.code===0){
            this.roomList=data.roomList;
          }else {
            this.$message.error("数据异常 !")
          }
      }
      ).catch(err=>{
        this.$message.error("接口异常 !")
      })
    },
     stopLive(room){
      return this.$http.put(`https://api.agora.io/edu/apps/${APPID}/v2/rooms/${room.roomUuid}/states/2`,null,{
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'x-agora-token':room.rtmToken,
          'x-agora-uid':room.userId
        }
      })
    },
     stopRoom(liveId){
      const data={
        liveId: liveId + ""
      }
      return this.$http({
        url:this.$http.adornUrl('/live/live/stopRoom'),
        method:'post',
        data:this.$http.adornData(data)
      })
    },
    liveRoom(){
      return this.$http({
        url:this.$http.adornUrl('/live/live/liveRoom'),
        methods: 'get'
      })
    }
  }
}
</script>

<style scoped>
  .dialog{
  border-radius :30px;
  width :30%;
    }
</style>
